<template>
  <div class="headerAll">
    <Appheader ref="loginStatus" style="display:none;"></Appheader>
    <div class="header">
      <div class="version">
        <div class="header_left">
          <div class="header_left_all" @click.stop="backhome">
            <!-- <img src="../../assets/pindaoye/home.png" alt /> -->
            艺传首页
          </div>
        </div>
        <div class="header_right">
          <div class="header_right_a red" @click="tolearn(4)"><img class="logo" src="../../assets/header_icon1.png"/>学习中心</div>
          <div class="header_right_a red" @click="tolearn(1)"><img class="logo" src="../../assets/header_icon2.png"/>我的订单</div>
          <div class="header_right_a flex aa red" @mouseover="aa()" @mouseleave="aa_go()">
            <img class="logo" src="../../assets/header_icon3.png"/>
            手机学习
            <!-- <img src="../../assets/black_down.png" alt v-if="!isaadown" />
            <img src="../../assets/red_dowm.png" alt v-if="isaadown" />
            <div class="appcode" v-if="isaadown">
              <div>
                <img src="../../assets/Wx2.png" alt />
                <div>随时逛&nbsp;&nbsp;&nbsp;随时看</div>
              </div>
            </div> -->
          </div>
          <div class="header_right_a red" @click="toAise()"><img class="logo" src="../../assets/header_icon1.png"/>帮助</div>
          <div class="header_right_a bb flex red">
            <span v-if="userphone==''" @click="login">登录</span>
            <div
              class="header_right_a bb2"
              v-if="userphone!=''"
              @mouseover="mouseOver"
              @mouseleave="mouseLeave"
            >
              <p>{{userphone}}</p>
              <div class="header_right_list">
                <p v-show="hide_addr" @click="goorder(0)" class="bb2_p2">账号设置</p>
                <p v-show="hide_addr" @click="goorder(1)" class="bb2_p2">我的订单</p>
                <p v-show="hide_addr" @click="goorder(2)" class="bb2_p2">购物车</p>
                <p v-show="hide_addr" @click="goorder(4)" class="bb2_p2">我的课程</p>
              </div>
            </div>
          </div>
          <div class="header_right_a red_color" v-if="userphone==''" @click.stop="register">注册</div>
          <div class="header_right_a red_color" v-if="userphone!=''" @click.stop="outlogin">退出</div>
        </div>
      </div>
    </div>
    <!-- 顶部白色栏 -->
    <div class="header_two">
      <div class="version">
        <!-- 左侧 logo 分割线 专业菜单按钮 -->
        <div class="header_two_left">
          <!-- logo -->
          <div class="logo_two" @click.stop="ToChannel">
            <!-- <img src="../../assets/pindaoye/logo.png" alt /> -->
            <img src="../../assets/logo.png" alt />
          </div>
          <!-- 分割线 -->
          <!-- <div class="divider"></div> -->
          <!-- 专业菜单按钮 -->
          <div
            v-if="nowPage == 'yikaozixunDetailPd' ? false : true"
            class="specialty_menu"
            :class="show_menu? 'redmenu' : ''"
            @mouseover="menu_show"
            @mouseleave="menu_hidden"
          >
            <div class="menu_title">
              <span style="color:#fff;">{{recruitType == '0' ? '各省统考':'校考'}}:</span>
              <span style="color:#c7aa4e;">{{ProfessionalName == ''?'暂无专业信息':ProfessionalName}}</span>
            </div>
            <img src="../../assets/pindaoye/menu_icon.png" v-if="!show_menu" class="menu_icon" alt />
            <img src="../../assets/pindaoye/redmenu.png" v-if="show_menu" class="menu_icon" alt />
            <!-- 专业菜单栏  -->
            <div class="menu_content" v-if="show_menu">
              <div class="trangle"></div>
              <div class="menu_element" style="width:100%">各省统考联考:</div>
              <div class="menu_content_a">
                <div
                  class="menu_element"
                  v-for="item in Professionallists"
                  :key="item.id"
                  @click.stop="clickProfessional(0,item.id,item.name)"
                >{{item.name}}</div>
              </div>
              <div class="menu_element" style="width:100%">名校校考:</div>
              <div class="menu_content_b">
                <div
                  class="menu_element"
                  v-for="item in Professionallists"
                  :key="item.id"
                  @click.stop="clickProfessional(1,item.id,item.name)"
                >{{item.name}}</div>
              </div>
            </div>
          </div>
        </div>
        <!--右侧专业菜单列表 -->
        <div class="header_two_right">
          <!-- 艺考资讯 -->
          <div
            class="art_info"
            :class="nowPage == 'yikaozixunPd'? 'redcolor' : ''"
            @click.stop="ToTushu(4)"
          >艺考资讯</div>
          <!-- 艺考资料 -->
          <!-- <div
            class="art_datum"
            @click.stop="ToTushu(3)"
            :class="nowPage == 'yikaoziliaoPd'? 'redcolor' : ''"
          >艺考资料</div> -->
          <div
            class="art_datum"
            @click.stop="ToTushu(3)"
            :class="nowPage == 'freePd'? 'redcolor' : ''"
          >免费试听</div>
          <!-- 艺考选课 -->
          <div
            class="art_selectClass"
            @click.stop="ToTushu(2)"
            :class="nowPage =='yikaoxuankePd'? 'redcolor' : ''"
          >艺考选课</div>
          <!-- 艺考图书 -->
          <div
            class="art_book"
            @click.stop="ToTushu(1)"
            :class="nowPage == 'yikaotushuPd'? 'redcolor' : ''"
          >艺考图书</div>
        </div>
      </div>
    </div>
    <!-- 修改密码 -->
    <div class="register">
      <el-dialog :visible.sync="modelPass" width="437px">
        <div class="reg_con">
          <div class="reg_top">欢迎登录<img src="../../assets/logo.png" alt="">艺传天下</div>
          <div class="reg_div">
            <input type="text" v-model="s_phone" placeholder="请输入手机号" />
          </div>
          <div class="reg_div">
            <input type="text" v-model="s_code" placeholder="请输入验证码" />
            <button class="reg_p" @click="getCode" :disabled="iscode">{{code}}</button>
          </div>
          <div class="reg_div">
            <input :type="ispassword" v-model="s_old_password" placeholder="请输入新密码" />
            <img
              src="../../assets/see_pass.png"
              alt
              class="pass_img"
              @click="pass_show"
              v-show="!isseecode"
            />
            <img
              src="../../assets/nosee_pass.png"
              alt
              class="pass_img"
              @click="pass_show"
              v-show="isseecode"
            />
          </div>
          <div class="reg_div">
            <input :type="ispassword2" v-model="s_new_password" placeholder="请确认新密码" />
            <img
              src="../../assets/see_pass.png"
              alt
              class="pass_img"
              @click="pass_show2"
              v-show="!isseecode2"
            />
            <img
              src="../../assets/nosee_pass.png"
              alt
              class="pass_img"
              @click="pass_show2"
              v-show="isseecode2"
            />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="surePass()">确认</el-button>
          <!-- <div class="jump_login flex">
            <p class="jump_line"></p>
            <p class="jump_txet" @click="go_login">账户登录</p>
            <p class="jump_line"></p>
          </div> -->
        </span>
      </el-dialog>
    </div>
    <!-- 页面登录 -->
    <div class="register">
      <el-dialog :visible.sync="modelLogin" width="437px">
        <div class="reg_con">
          <div class="reg_top">欢迎注册<img src="../../assets/logo.png" alt="">艺传天下</div>
          <div class="reg_div">
            <input type="text" v-model="s_phone" placeholder="请输入手机号" />
          </div>
          <div class="reg_div" v-if="login_name=='密码登录'">
            <input type="text" v-model="s_code" placeholder="请输入验证码" />
            <button class="reg_p" @click="getCode" :disabled="iscode">{{code}}</button>
          </div>
          <div class="reg_div" v-if="login_name=='验证码登录'">
            <input :type="ispassword" v-model="s_password" placeholder="请输入密码" />
            <img
              src="../../assets/see_pass.png"
              alt
              class="pass_img"
              @click="pass_show"
              v-show="!isseecode"
            />
            <img
              src="../../assets/nosee_pass.png"
              alt
              class="pass_img2"
              @click="pass_show"
              v-show="isseecode"
            />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="sureLogin()">登录</el-button>
          <div class="footer_button flex">
            <p @click="goReg()">免费注册</p>
            <p>
              <span @click="gologin()" style="color:red;">{{login_name}}</span>
              <span @click="goForfet()">忘记密码?</span>
            </p>
          </div>
          <!-- <div class="jump_login flex">
            <p class="jump_line"></p>
            <p class="jump_txet" @click="go_login">账户登录</p>
            <p class="jump_line"></p>
          </div> -->
        </span>
      </el-dialog>
    </div>
    <!-- 注册 -->
    <div class="register">
      <el-dialog :visible.sync="modelRegister" width="437px">
        <div class="reg_con">
          <div class="reg_top">欢迎登录<img src="../../assets/logo.png" alt="">艺传天下</div>
          <div class="reg_div">
            <input type="text" v-model="s_phone" placeholder="请输入手机号" />
          </div>
          <div class="reg_div">
            <input type="text" v-model="s_code" placeholder="请输入验证码" />
            <button class="reg_p" @click="getCode" :disabled="iscode">{{code}}</button>
          </div>
          <div class="reg_div" style="position:relative;">
            <p class="addr_slo">所在区域:</p>
            <div style="width:64%;" class="reg_div_div">
              <input
                type="text"
                v-model="addressC"
                placeholder="请选择所属省份"
                readonly
                @click="choose_prev"
                style="cursor: pointer;width:285px;"
              />
              <img src="../../assets/select_down.png" alt class="img_prev" @click="choose_prev" />
            </div>
            <div class="address" style="top:65px;" v-show="register_addr">
              <div
                v-for="(addresslist,adddressindex) in address"
                :key="adddressindex"
                @click="chooseadd(addresslist.addname)"
                :class="addressC==addresslist.addname?'addBg':''"
              >{{addresslist.addname}}</div>
            </div>
          </div>
          <div class="reg_div">
            <input :type="ispassword" v-model="s_password" placeholder="请输入密码" />
            <img
              src="../../assets/see_pass.png"
              alt
              class="pass_img"
              @click="pass_show"
              v-show="!isseecode"
            />
            <img
              src="../../assets/nosee_pass.png"
              alt
              class="pass_img2"
              @click="pass_show"
              v-show="isseecode"
            />
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="amendSure()">注册</el-button>
          <!-- <div class="jump_login flex">
            <p class="jump_line"></p>
            <p class="jump_txet" @click="go_login">账户登录</p>
            <p class="jump_line"></p>
          </div> -->
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Appheader from "../header";
import address from "../../../static/address";
import {
  send_message,
  register,
  yanzlogin,
  mmlogin,
  forgetmm,
  info,
  outlogin,
  Professionallist,
  ykGoodslist
} from "../../api/index.js";
export default {
  props: {},
  name: "App",
  props: ["parentToChild"],
  data() {
    return {
      //  原始数据 ---------
      address: address,
      isdown: false, //下拉箭头
      addressC: "全国",
      aabg: false,
      isaadown: false,
      ishome: "首页",
      modelRegister: false, //注册弹窗
      s_phone: "",
      s_code: "",
      s_password: "",
      online_code: "",
      code: "获取验证码",
      iscode: false,
      register_addr: false,
      ispassword: "password",
      ispassword2: "password",
      isseecode: true,
      isseecode2: true,
      modelLogin: false, //登录弹窗
      login_name: "密码登录",
      modelPass: false, //密码tanc
      s_old_password: "",
      s_new_password: "", //新密码
      userid: "",
      userphone: "",
      hide_addr: false,
      zhuanyef: [],
      isfen: false,
      timer: null,
      cartnum: 0,
      // 原始数据 ---------

      // 招生类型0统考 1校招
      recruitType: "0",
      // 专业名字
      ProfessionalName: "",
      // 专业ID
      ProfessionalId: "",
      // 显示菜单栏
      show_menu: false,
      // 显示当前页面选项标志为红色
      nowPage: "",
      // 省统考和校考专业列表
      Professionallists: []
    };
  },
  computed: {},
  created() {
    this.nowPage = sessionStorage.getItem("nowPage");
    console.log(this.nowPage);
    // 请求招生类型
    this.GetRecruitType();
    // 请求专业列表
    this.GetProfessionallist();
  },
  mounted() {
    if (localStorage.getItem("YKuserphone")) {
      this.userphone = localStorage.getItem("YKuserphone");
      this.cartnum = localStorage.getItem("cartnum");
    }
  },
  watch: {},
  methods: {
    // 获取 招生类型 省统招 0 校招 1
    GetRecruitType() {
      this.recruitType = this.$route.params.type;
      this.ProfessionalName = this.$route.params.name;
      this.ProfessionalId = this.$route.params.profationId;
      if (
        this.ProfessionalId == "" ||
        this.ProfessionalId == undefined ||
        this.ProfessionalId == null
      ) {
        this.recruitType = localStorage.getItem("type");
        this.ProfessionalName = localStorage.getItem("profationName");
        this.ProfessionalId = localStorage.getItem("profationId");
      } else {
        localStorage.setItem("type", this.recruitType);
        localStorage.setItem("profationName", this.ProfessionalName);
        localStorage.setItem("profationId", this.ProfessionalId);
        localStorage.setItem("profationId", this.ProfessionalId);
      }
    },
    // 获取专业列表
    GetProfessionallist() {
      let msg = {};
      Professionallist(this.qs(msg))
        .then(res => {
          if (res.data.code == 0) {
            this.Professionallists = res.data.rows;
          } else {
            this.$message("暂无专业列表数据");
          }
        })
        .catch(err => {});
    },
    // 进入艺考列表
    ToTushu(i) {
      if (i == 4) {
        this.$router.push({
          name: "zixunLists",
          params: {
            type: this.recruitType,
            zixuntype: '',
            pId: this.ProfessionalId
          }
        });
      } else if (i == 3) {
        this.$router.push({
          name: "pFree",
          params: {
            type: this.recruitType,
            pId: this.ProfessionalId
          }
        });
      } else if (i == 2) {
        this.$router.push({
          name: "xuankeLists",
          params: {
            type: this.recruitType,
            pId: this.ProfessionalId
          }
        });
      } else if (i == 1) {
        this.$router.push({
          name: "tushuLists",
          params: {
            type: this.recruitType,
            pId: this.ProfessionalId
          }
        });
      }
    },
    menu_show() {
      if (this.show_menu == false) {
        this.show_menu = true;
      } else {
        return;
      }
    },
    menu_hidden() {
      if (this.show_menu == true) {
        this.show_menu = false;
      } else {
        return;
      }
    },
    ToChannel() {
      sessionStorage.removeItem("nowPage");
      this.$router.push({
        name: "channel",
        params: {
          type: this.recruitType,
          profationId: this.ProfessionalId,
          name: this.ProfessionalName
        }
      });
    },
    clickProfessional(type, id, name) {
      if (type == 0) {
        this.recruitType = "0";
        localStorage.setItem("type", "0");
      } else {
        this.recruitType = "1";
        localStorage.setItem("type", "1");
      }
      this.ProfessionalName = name;
      this.ProfessionalId = id;
      // 设置缓存信息
      localStorage.setItem("profationName", name);
      localStorage.setItem("ProfessionalId", id);
      var values = {
        type: this.recruitType,
        name: this.ProfessionalName,
        id: this.ProfessionalId
      };
      this.$emit("refresh", values);
      // this.$emit("refresh");
    },
    /**
     *
     * 原始方法
     *
     *
     */
    //专业
    listf(id) {
      this.$emit("cid", id);
    },
    top_active() {
      this.ishome = this.parentToChild;
    },
    //显示专业分类
    over_l() {
      this.isfen = true;
    },
    leave_l() {
      this.isfen = false;
    },
    userDetail() {
      let msg = {
        id: localStorage.getItem("YKuserid")
      };
      info(this.qs(msg))
        .then(res => {
          // this.$message({
          //   type: "info",
          //   message: res.data.msg
          // });
          if (res.data.code == 0) {
            localStorage.setItem("YKuserphone", res.data.ykUser.phone);
            localStorage.setItem("cartnum", res.data.ykUser.cartnum);
            this.userphone = res.data.ykUser.phone;
            // this.$router.go(0);
            this.cartnum = res.data.ykUser.cartnum;
          }
        })
        .catch(e => {});
    },
    header_left_all() {
      this.isdown = !this.isdown;
    },
    chooseadd(addNmae) {
      this.addressC = addNmae;
      this.$emit("c_addrname", addNmae);
      this.isdown = !this.isdown;
    },
    aa() {
      this.isaadown = true;
      this.aabg = true;
    },
    aa_go() {
      this.isaadown = false;
      this.aabg = false;
    },
    logo() {
      this.$router.push({
        name: "home"
      });
    },
    //返回顶部
    backtop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    backhome() {
      this.$router.push({
        name: "home"
      });
      sessionStorage.removeItem("nowPage");
      sessionStorage.setItem("header_click", "home");
    },
    //注册弹窗
    register() {
      this.modelRegister = true;
    },
    getCode() {
      var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
      if (this.s_phone) {
        if (!reg.test(this.s_phone)) {
          this.$message({
            type: "error",
            message: "手机号格式不正确"
          });
          return;
        }
        let that = this;
        that.code = 60;
        that.iscode = true;
        that.timer = setInterval(() => {
          that.code = that.code - 1;
          if (that.code < 1) {
            clearInterval(that.timer);
            that.code = "获取验证码";
            that.iscode = false;
          }
        }, 1000);
        let msg = {
          mobile: this.s_phone
        };
        send_message(this.qs(msg))
          .then(res => {
            if (res.data.code == 0) {
              that.online_code = res.data.msg;
            } else {
              clearInterval(that.timer);
              that.code = "获取验证码";
              that.iscode = false;
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          })
          .catch(e => {});
      } else {
        this.$message({
          type: "error",
          message: "请先填写手机号"
        });
      }
    },
    //注册
    amendSure() {
      let that = this;
      if (this.s_phone && this.s_code && this.addressC && this.s_password) {
        if (this.s_code != this.online_code) {
          this.$message({
            type: "error",
            message: "验证码不正确"
          });
          return;
        }
        let msg = {
          phone: this.s_phone,
          password: this.s_password,
          username: ""
        };
        register(this.qs(msg))
          .then(res => {
            this.$message({
              type: "info",
              message: res.data.msg
            });
            this.modelRegister = false;
            if (res.data.code == 0) {
              that.s_phone = "";
              that.s_code = "";
              that.addressC = "";
              that.s_password = "";
              clearInterval(that.timer);
              that.code = "获取验证码";
              that.iscode = false;
              that.modelLogin = true;
              // this.$message({
              //   type: "success",
              //   message: "请登录"
              // });
              this.modelLogin = true;
            } else {
              clearInterval(that.timer);
              that.code = "获取验证码";
              that.iscode = false;
            }
          })
          .catch(e => {});
      } else {
        this.$message({
          type: "error",
          message: "请先输入注册信息"
        });
      }
    },
    choose_prev() {
      this.register_addr = !this.register_addr;
    },
    //显示密码
    pass_show() {
      if (this.ispassword == "password") {
        this.ispassword = "text";
      } else if (this.ispassword == "text") {
        this.ispassword = "password";
      }
      this.isseecode = !this.isseecode;
    },
    //显示新密码
    pass_show2() {
      if (this.ispassword2 == "password") {
        this.ispassword2 = "text";
      } else if (this.ispassword2 == "text") {
        this.ispassword2 = "password";
      }
      this.isseecode2 = !this.isseecode2;
    },
    //密码和验证码登录切换
    gologin() {
      if (this.login_name == "密码登录") {
        this.login_name = "验证码登录";
      } else if ((this.login_name = "验证码登录")) {
        this.login_name = "密码登录";
      }
    },
    //忘记密码
    goForfet() {
      this.modelPass = true;
      this.modelLogin = false;
    },
    goReg() {
      this.modelRegister = true;
      this.modelLogin = false;
    },
    //验证码登录
    sureLogin() {
      let that = this;
      if (this.login_name == "密码登录") {
        if (this.s_phone && this.s_code) {
          if (this.s_code != this.online_code) {
            this.$message({
              type: "error",
              message: "验证码不正确"
            });
            return;
          }
          let msg = {
            phone: this.s_phone
          };
          yanzlogin(this.qs(msg))
            .then(res => {
              this.$message({
                type: "info",
                message: res.data.msg
              });
              if (res.data.code == 0) {
                localStorage.setItem("YKuserid", res.data.userId);
                this.userid = res.data.userId;
                this.userDetail();
                this.s_phone = "";
                this.s_code = "";
                clearInterval(that.timer);
                that.code = "获取验证码";
                that.iscode = false;
                this.modelLogin = false;
                // this.$router.go(0);
              } else {
                clearInterval(that.timer);
                that.code = "获取验证码";
                that.iscode = false;
              }
            })
            .catch(e => {});
        } else {
          this.$message({
            type: "error",
            message: "请先输入登录信息"
          });
        }
      } else if (this.login_name == "验证码登录") {
        var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
        if (this.s_phone && this.s_password) {
          if (!reg.test(this.s_phone)) {
            this.$message({
              type: "error",
              message: "手机号格式不正确"
            });
            return;
          }
          let msg = {
            phone: this.s_phone,
            password: this.s_password
          };
          mmlogin(this.qs(msg))
            .then(res => {
              this.$message({
                type: "info",
                message: res.data.msg
              });
              if (res.data.code == 0) {
                localStorage.setItem("YKuserid", res.data.userId);
                this.userid = res.data.userId;
                this.userDetail();
                this.s_phone = "";
                this.s_password = "";
                this.modelLogin = false;
              }
            })
            .catch(e => {});
        } else {
          this.$message({
            type: "error",
            message: "请先输入登录信息"
          });
        }
      }
    },
    surePass() {
      let that = this;
      if (
        this.s_phone &&
        this.s_old_password &&
        this.s_new_password &&
        this.s_code
      ) {
        if (this.s_code != this.online_code) {
          this.$message({
            type: "error",
            message: "验证码不正确"
          });
          return;
        }
        if (this.s_old_password != this.s_new_password) {
          this.$message({
            type: "error",
            message: "两次密码不一致"
          });
          return;
        }
        let msg = {
          phone: this.s_phone,
          password: this.s_new_password
        };
        forgetmm(this.qs(msg))
          .then(res => {
            this.$message({
              type: "info",
              message: res.data.msg
            });
            if (res.data.code == 0) {
              this.s_phone = "";
              this.s_old_password = "";
              this.s_new_password = "";
              this.s_code = "";
              clearInterval(that.timer);
              that.code = "获取验证码";
              that.iscode = false;
              this.modelPass = false;
              this.$message({
                type: "info",
                message: "请重新登录"
              });
            }
          })
          .catch(e => {});
      } else {
        this.$message({
          type: "error",
          message: "请先输入登录信息"
        });
      }
    },
    login() {
      this.modelLogin = true;
    },
    //退出
    outlogin() {
      let that = this;
      let msg = {
        id: localStorage.getItem("YKuserid")
      };
      outlogin(this.qs(msg))
        .then(res => {
          this.$message({
            type: "info",
            message: res.data.msg
          });
          that.$router.push({
            name: "channel"
          });
          if (res.data.code == 0) {
            that.userphone = "";
            localStorage.removeItem("YKuserid");
            localStorage.removeItem("YKuserphone");
          }
        })
        .catch(e => {});
    },
    mouseOver() {
      this.hide_addr = true;
    },
    mouseLeave() {
      this.hide_addr = false;
    },
    cart() {
      if (localStorage.getItem("YKuserid")) {
        this.$router.push({
          name: "car"
        });
      } else {
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        this.modelLogin = true;
        return;
      }
    },
    jihuo() {
      if (localStorage.getItem("YKuserid")) {
        this.$router.push({
          name: "myKecheng",
          params: {
            c: "1"
          }
        });
      } else {
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        this.modelLogin = true;
        return;
      }
    },
    victor() {
      if (localStorage.getItem("YKuserid")) {
        easemobim.bind();
      } else {
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        this.modelLogin = true;
        return;
      }
    },
    goorder(i) {
      this.$refs.loginStatus.goorder(i);
    },
    go_login() {
      this.modelRegister = false;
      this.modelLogin = true;
      this.modelPass = false;
    },
    tomain() {
      if (localStorage.getItem("YKuserid")) {
        this.$router.push({
          name: "main"
        });
      } else {
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        this.modelLogin = true;
        return;
      }
    },
    tolearn(i) {
      if (localStorage.getItem("YKuserid")) {
        if (i == 4) {
          //我的课程
          this.$router.push({
            name: "myKecheng"
          });
        } else if (i == 1) {
          //我的订单
          this.$router.push({
            name: "order"
          });
        }
      } else {
        // this.$message({
        //   type: "error",
        //   message: "请登录"
        // });
        this.login();
        return;
      }
    },
    toAise() {
      this.$refs.loginStatus.toAise(i);
    }
  },
  components: { Appheader }
};
</script>

<style scoped>
.headerAll {
  width: 100%;
  min-width: 1150px;
}
.version {
  margin: 0 auto;
  display: flex;
  align-items: center;
  width: 1200px;
  min-width: 1200px;
  height: 100%;
  justify-content: space-between;
}
/* 顶部灰色栏 -----------------------*/
.header {
  /* 顶部灰色栏 */
  padding:15px 0;
  border-bottom: 1px solid #444750;
  height: 27px;
  width: 100%;
  background: #262630;
  line-height: 27px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #7c7e8d;
}
.header_left {
  /* 顶部栏左侧logo区 */
  display: flex;
  justify-content: start;
  align-items: center;
  /* width: 50%; */
  height: 100%;
}
.header_left_all {
  /* logo盒子 */
  display: flex;
  justify-content: start;
  align-items: center;
  height: 100%;
  cursor: pointer;
}
.header_left_all img {
  margin-right: 5px;
  height: 14px;
  width: 18px;
}
.header_right {
  /* 顶部栏右侧功能区 */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 464px;
  margin-right:50px;
  height: 100%;
}
.header_right > div {
  /* 右侧功能区直接子元素整体宽高 */
  height: 100%;
  cursor: pointer;
}
.aa {
  /* 手机学习按钮单独宽度 */
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* width: 68px !important; */
}
.aa > img {
  height: 7;
  width: 13px;
}
.aa:hover {
  color: #c7aa4e;
}
/* 原有样式 */
.bb {
  height: 100%;
  justify-content: center;
  position: relative;
  z-index: 1000;
  width: 64px;
}
.bb > span {
  width: 60px;
  height: 25px;
  border: 1px solid #977c47;
  border-radius: 25px;
  font-size: 12px;
  display: block;
  text-align: center;
  line-height: 25px;
  color: #7b7d8a;
}
.bb > span:hover {
  background: #977c47;
  color: #fff;
}
.header_right_list {
  position: absolute;
  left: -5px;
  top: 32px;
  width: 90px;
  z-index: 9999;
}
.bb2_p2 {
  height: 33px;
  line-height: 33px;
  text-align: center;
  border-top: none;
  margin: 0;
  background: rgba(255, 255, 255, 1);
}
.bb2_p2:hover {
  color: #c7aa4e;
}
/* 手机学习 */
.appcode {
   width: 100px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(206, 204, 204, 1);
  padding-top: 8px;
  position: absolute;
  top: 33px;
  right: 0px;
  z-index: 999;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding:0 10px;
}
.appcode > div > img {
  width: 99px;
  height: 98px;
  margin: 0 auto;
  margin-bottom: 7px;
  display: block;
}
.appcode > div > div {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  line-height: 18px;
  text-align: center;
}
/* 原始样式 */
.header_right_a {
  font-size: 12px;
  color: #7c7e8d;
  display: flex;
  align-items: center;
}
.header_right_a:hover .bb2 > p:nth-child(1) {
  color: #7c7e8d;
}
.header_left_all > img {
  margin-right: 5px;
  width: 18px;
  height: 14px;
}
.none {
  display: none;
}
.header_right {
  justify-content: space-between;
  display: flex;
  align-items: center;
  height: 100%;
}
.header_right_a > img {
  margin-right: 3px;
  width: 25px;
  height: 25px;
}
.header_right > .red_color {
  width: 60px;
  height: 25px;
  /* background: #fff;
  border: 1px solid rgba(238, 238, 238, 1); */
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  justify-content: center;
  line-height: 25px;
  color: #797b88;
}
.header_right > .red_color:hover {
  background: #cda54d;
  color: #fff;
}
.red:hover {
  color: #cda54d;
}
/* 顶部灰色栏 -----------------------*/

/* 顶部白色栏 -----------------------*/
.header_two {
  /* 顶部白色栏 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 98px;
  width: 100%;
}
.header_two_left {
  /* 左侧父盒子 */
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  width: 40%;
}
.header_two_left > div {
  /* 左侧栏直接子元素定位 */
  /* margin-right: 16px; */
}
.logo_two {
  /* logo盒子 */
  height: 52px;
  width: 210px;
}
.logo_two img {
  height: 100%;
  width: 100%;
}
.divider {
  /* 分割线 */
  width: 1px;
  height: 37px;
  background: rgba(153, 153, 153, 1);
}
.specialty_menu {
  /* 专业菜单按钮盒子 */
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 59px;
  min-width: 192px;
  cursor: pointer;
}
.menu_title {
  /* 专业菜单按钮标题 */
  padding:0 15px;
  min-width: 147px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  /* color: rgba(51, 51, 51, 1); */
}
.redmune:hover {
  background: #fff;
}
/* .redmune:hover > .menu_title {
  color: rgba(216, 20, 23, 1);
} */
.menu_icon {
  /* 专业菜单按钮图标 */
  margin-right: 5px;
  height: 15px;
  width: 20px;
}
.menu_content {
  /* 专业菜单栏 */
  position: absolute;
  top: 80px;
  left: 150px;
  /* width: 450px;
  background: #fff;
  z-index: 9999;
  box-shadow: 0px 9px 39px RGBA(0, 0, 0, 0.3);
  border-radius: 2px; */
  width: 384px;
  padding: 0 20px;
  background: #ffffff;
  z-index: 9999;
  border: 1px solid #eee;
  box-shadow: 0px 9px 39px RGBA(0, 0, 0, 0.3);
  border-radius: 2px;
}
.trangle {
  /* 三角形 */
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-width: 0 15px 15px;
  border-style: solid;
  border-color: transparent transparent #fff; /*透明 透明  灰*/
}
.menu_content_a,
.menu_content_b {
  /* 菜单栏二级父元素 */
  display: flex;
  justify-content: start;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 24px;
  width: 100%;
  font-size: 14px;
  color: black;
}
.menu_content_a {
  padding-top: 8px;
  border-bottom: 1px solid #ccc;
}

.menu_element {
  margin-top: 20px;
  margin-right: 57px;
  height: 20px;
  text-align: left;
  line-height: 20px;
}
.menu_element:hover {
  color: rgba(216, 20, 23, 1);
  cursor: pointer;
}
.marg0 {
  margin-right: 0 !important;
}
.menu_content_a > :nth-child(4n),
.menu_content_b > :nth-child(4) {
  margin-right: 0 !important;
}
.header_two_right {
  /* 又侧父盒子 */
  display: flex;
  justify-content: start;
  align-items: center;
  height: 100%;
  width: 60%;
}
.header_two_right div {
  /* 又侧栏直接子元素定位 */
  margin-left: 106px;
  cursor: pointer;
  color: #fff;
  line-height: 98px;
}
.header_two_right > div:hover {
  color: #c7aa4e;
}
/* 顶部白色栏 -----------------------*/

/* 登录模态框 */
.register >>> .el-dialog__footer {
  padding: 0px 62px;
  padding-top: 31px;
  padding-bottom: 55px;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.jump_line {
  width: 111px;
  height: 1px;
  background: #333333;
}
.jump_txet {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin: 0 16px;
  cursor: pointer;
}
/* login */

/* register */
.register >>> .el-dialog {
  border-radius: 10px !important;
  z-index: 9999;
}
.register >>> .el-dialog__headerbtn {
  top: 8px !important;
  right: 10px !important;
}
.register >>> .el-dialog__body {
  padding: 0px 62px;
  padding-top: 36px;
}
.reg_top {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: rgba(216, 20, 23, 1);
  text-align: center;
  justify-content: center;
}
.reg_top>img{
  width: 100px;
  height: 29px;
}
.reg_div {
  height: 64px;
  border-bottom: 1px solid #333333;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 3px;
  cursor: pointer;
}
.reg_div input {
  border: 0;
  display: block;
  background: #fff;
  margin-bottom: 7px;
  font-size: 14px;
  color: #333;
  width: 200px;
  margin-right: 6px;
}
.reg_div input::placeholder {
  font-size: 14px;
  color: #666;
}
.reg_div_div{
  height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 3px;
  cursor: pointer;
}
.addr_slo {
  width: 26%;
  font-size: 14px;
  color: #333;
  padding: 0 3px;
  margin-bottom: 7px;
}
.reg_p {
  font-size: 14px;
  color: rgba(216, 20, 23, 1);
  margin-bottom: 7px;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}
.img_prev {
  width: 15px;
  height: 9px;
  margin-bottom: 10px;
}
.pass_img {
  width: 16px;
  height: 12px;
  margin-bottom: 10px;
}
.pass_img2 {
  width: 14px;
  height: 8px;
  margin-bottom: 10px;
}
.register >>> .dialog-footer > button {
  width: 312px;
  height: 40px;
  background: rgba(216, 20, 23, 1);
  border-radius: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
  border-color: rgba(216, 20, 23, 1);
  margin-bottom: 20px;
}
.register >>> .el-dialog__footer {
  padding: 0px 62px;
  padding-top: 31px;
  padding-bottom: 55px;
  text-align: right;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.jump_line {
  width: 111px;
  height: 1px;
  background: #333333;
}
.jump_txet {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin: 0 16px;
  cursor: pointer;
}
/* login */

.footer_button {
  margin-bottom: 4px;
  justify-content: space-between;
}
.footer_button > p {
  font-size: 14px;
  cursor: pointer;
}
.footer_button > p:nth-child(1) {
  color: rgba(216, 20, 23, 1);
}
.footer_button > p:nth-child(2) {
  color: rgba(51, 51, 51, 1);
}
.footer_button > p:nth-child(2) > span:nth-child(1) {
  margin-right: 10px;
}
/* 红色字体 */
.redcolor {
  color: #a89048;
}
.header_two_right div.redcolor{
  color: #a89048;
}
.redmenu {
  color: #a89048 !important;
}
</style>